<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<image src="../../static/back.png" mode="aspectFill" @click="tapToBack('back')"></image>
			</view>
			<view class="title">门店</view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		
		<!-- banner -->
		<view class="shop_title">
			<view class="title">
				<view class="left">
					<view class="name">
						{{store.name}}
					</view>
					<view class="date">
						营业中 
						<!-- 周一至周五 11:00-00:0 -->
					</view>
				</view>
				<view class="right">
					<image
						src="https://imgs.ynz666.com/test/2025/01/08/YzE5NjQ3MWMwMmZmM2M0M2NjYTY5YzYyZGYxNjVkNTQ=.png"
						mode="aspectFill" class="img"></image> 
					<view class="bot">
						分享
					</view>
					<button open-type="share" id="placard"></button>
				</view>
			</view>
			<view class="banner">
				<view class="item"  v-for="(item,index) in store.publicityImgs" :key="index" @click="imagePreview(index,store.publicityImgs)">
					<image :src="item" mode="aspectFill" class="img"></image>
				</view>
					
			</view>
			<view class="address">
				<view class="left">
					<view class="name">
						{{store.address}}
					</view>
					<view class="distance">
						<!-- 距您726m 步行5分钟 -->
						距你{{store.distance}}km
					</view>
				</view>
				<view class="right">
					<view class="item" @click="openMap">
						<image src="https://imgs.ynz666.com/test/2025/01/08/MzEzOTg5ZmRkNTBhOWZkZjA2MWU1ODI0OTFiNjU4NTU=.png" mode="aspectFill" class="img"></image>
						<view class="text">
							导航
						</view>
					</view>
					<view class="item" @click="phoneClick">
						<image src="https://imgs.ynz666.com/test/2025/01/08/YzMzNzZmOGI2NGRhOWM0ZDM5ODU0NGVlOGVjYmE0MGE=.png" mode="aspectFill" class="img"></image>
						<view class="text">
							电话
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 代金券 -->
		<!-- <view class="voucher">
			<view class="shop_box">
				<view class="voucher_title">
					<view class="left">
						代金券
					</view>
				</view>
				<view class="voucher_con">
					<view class="con_left">
							<view class="name">
								50代100元代金券
							</view>
							<view class="date">
								适用时间·单次可用张数·使用场景
							</view>
							<view class="priceAll">
								<view class="peiceNew">
									<text class="fontSize">¥</text>50
								</view>
								<view class="peiceOld">
									5折
								</view>
							</view>
					</view>
					<view class="con_right">
						
						<view class="text">
							已售200+
						</view>
						<view class="btn">
							抢购赚积分
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
		
		<!-- 热门团购 -->
		<view class="groupShop">
			<view class="group_title">
				热门团购
			</view>
			<view class="group_con">
				<view class="item" v-for="(item,index) in groupList" :key="index" @click="jumpDetil(2,item.id)">
					<image :src="item.mainImage[0]" mode="aspectFill" class="img"></image>
					<view class="right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="desc">
							<!-- 免预约｜随时退过期退 -->
							<text v-for="(itemA,indexA) in item.benefitPoints" :key="indexA">
							 <text class="text_right">{{itemA}}</text>
							 <text class="text_xhx" v-if="indexA!==item.benefitPoints.length-1">|</text>
							</text>
						</view>
						<view class="price">
							<view class="price_left">
								<view class="priceNew">
									<text class="fontSize">¥</text>{{item.salePrice}}
								</view>
								<view class="priceOld">
									原价{{item.marketPrice}}
								</view>
							</view>
							<view class="price_right">
								抢购赚积分
							</view>
						</view>
					</view>
				</view>
				<view class="item_kong" v-if="isLastPage">
					已经到底了哦～
				</view>
			</view>
		</view>
		
	</view>
	
</view>
</template>

<script>
	import QQMapWX from 'lib/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js';
	import Map from 'js_sdk/ms-openMap/openMap.js'
	var qqmapsdk = new QQMapWX({
		key: 'IYIBZ-3DC6U-HRYVF-2E3CJ-OSJDS-E5FDF' 
	});
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import gongType from '@/utils/debounce.js'
	import painter from '@/wxcomponents/painter/painter';
	import loading from '../../components/loading/loading.vue';
	import {
		apiStoreInfo,apiStoreGroupBuy
	} from '../../apis/my.js';
	
	var app = getApp();
	export default {
		data() {
			return {
				platfrom: '',
				statusBarHeight :0,
				titleBarHeight : 0,
				bottomTabbar :0,
				scrollFlag:false,
				inviteId:'',//用户个人id
				mineInfo:{},
				store_id: "",
				location: "",
				store: {},
				navOneList:[
					{
						name:'权益详情',
						id:0
					},
					{
						name:'购买须知',
						id:1
					}
				],
				navIndexOne:0,//切换正在 和我的
				
				
				par: {
					id:'',
					page: 1,
					pageSize: 10,
					pagination:true,
				},
				groupList:[],//团购列表
				saleDetails: [],
				isLastPage: false,
				loading:true,
			}
		},
		components: {
			loading
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onReachBottom() {
			if (!this.isLastPage) {
				
				this.par.page++;
				this.storeGroupList();
			}
		},
		onShareAppMessage(res) {
			let title = this.store.name
			// if(res.target.id=="placard"){
				return {
					title: title,
					imageUrl : this.store.publicityImgs[0],
					path: `/pageC/shopDetail/shopDetail?store_id=${this.store_id}`
				}
			// }
		},
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +uni.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onLoad(options){
			let that = this;
			let store_id = null;
			that.location = app.globalData.latitude + "," + app.globalData.longitude;
			
			// 正常进 小程序码进 分享进
			app.isLogin({},function(login){
				if(options.inviteId && options.store_id && options.shopId){
					// 分享进
					store_id = options.store_id;
					that.par.id = options.store_id;
					that.store_id = store_id;
					that.getDetail(store_id, that.location);
					that.LoginInvite(login);
					that.storeGroupList();
				}else if(options.scene){
					console.log(options.scene,"options.scene111")
					// 小程序码
					let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
					console.log(qrSourceId,"qrSourceId")
					app.QrcodeSource(qrSourceId).then(qrinfo=>{
						store_id = qrinfo.sourceId;
						that.store_id = store_id;
						that.getDetail(store_id, that.location);
						that.LoginInvite(login);
					})
				}else{
					store_id = options.store_id;
					that.store_id = store_id;
					that.par.id = options.store_id;
					that.getDetail(store_id, that.location);
					that.LoginInvite(login);
					
					that.storeGroupList();
					
				}
			})
		},
		onShow(){
			// #ifdef MP-WEIXIN
			// #endif
			// #ifdef MP-TOUTIAO
					this.platfrom = 'TOUTIAO';
			// #endif
		},
		methods: {
			jumpDetil(type,id){
				switch (type) {
					case 1:
						uni.navigateTo({
							url: `/pageC/pointEquity/pointEquity?store_id=${id}`
						})
						break;
					case 2:
					  uni.navigateTo({
					  	url: `/pageC/pointGroup/pointGroup?store_id=${id}`
					  })
					  break;
					default:
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						break;
				}
			},
			// 获取团购列表
			storeGroupList(){
				let that = this;
				apiStoreGroupBuy(that.par).then(res=>{
					that.isLastPage=res.data.lastPage
					if (res.data.list.length > 0) {
						that.groupList = that.par.page == 1 ? res.data.list : that.groupList.concat(res.data.list);
						console.log(that.groupList, "团购列表")
					}
				})
			},
			// 返回按钮
			tapToBack(page) {
				console.log(111111,"11111:")
				switch(page){
					case 'index':
						uni.switchTab({
							url:'/pages/index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					break;
				}
			},
			getSecKillData() {
				let that = this;
				http.post('/api/platform/v1/sale/details',{
					page:that.par.page,
					pageSize:10
				}).then(res => { 
					this.saleDetails = this.par.page == 1 ? res.data.data : this.saleDetails.concat(res.data.data);
					this.isLastPage = res.data.is_last_page;
				})
			},
			// 获取商家详情
			getDetail(s_id, location) {
				var that = this
				// uni.showLoading();
				const params = {
					id:  s_id,
					lat: location.split(',')[0],
					lng: location.split(',')[1],
				}
				
				apiStoreInfo(params).then(res=>{
					that.store = res.data;
					that.loading=false
				})
				
				// that.MapDirection();
				
				// app.httpRequest({
				// 	url:app.globalData.api.store.StoreDetail,
				// 	data:params,
				// }).then( res => {
				// 	console.log(res,'商户详情')
				// 	let rep = /[\.]/;
				// 	if(rep.test(res.score)){
				// 		res.score = Math.floor(res.score *100)/100;
				// 	}else {
				// 		res.score = res.score + '.0';
				// 	}
				// 	that.store = res;
					
					
				// 	that.MapDirection();
				// 	uni.hideLoading();
				// }).catch(err=>{
				// 	uni.showToast({
				// 		title:err.message?err.message:'获取商家信息失败',
				// 		icon:'none',
				// 		success() {
				// 			setTimeout(function(){
				// 				uni.switchTab({
				// 					url:'/pages/index/index'
				// 				})
				// 			},2000)
				// 		}
				// 	})
				// });
			},
			phoneClick() {
				uni.makePhoneCall({
					phoneNumber: this.store.phone,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				});
			},
			// 用户地图
			MapDirection(){
				let that = this;
				qqmapsdk.direction({
					mode:'walking',
					tags:['LEAST_TIME'],
					from:{
						latitude:app.globalData.latitude,
						longitude:app.globalData.longitude
					},
					to:{
						latitude:that.store.location.split(',')[0],
						longitude:that.store.location.split(',')[1]
					},
					success(loc) {
						console.log(loc,"loc")
						that.mapDuration = loc.result.routes[0].duration;
					}
				})
			},
			// 打开地图
			openMap() {
				console.log(this.store,"this.store")
				Map.openMap( Number(this.store.lat),Number(this.store.lng),this.store.address, "gcj02");//wgs84
			},
			// 评论图片预览
			imagePreview(index,imgArr){
				uni.previewImage({
					urls:imgArr,
					current:imgArr[index],
				})
			},
			navClickOne(item, index){
				this.navIndexOne = index
			},
			// 接入微信客服
			WeixinServer(){
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			LoginInvite(login){
				let that = this;
				let inviteId = that.inviteId;
				that.mineInfo = login;
				if(inviteId){
					app.isLogin({id:inviteId},function(res){
						that.mineInfo = res;
					});
				}
			},
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					if(that.inviteId !==''){
						app.isLogin({id:that.inviteId},function(login){
							that.mineInfo = login;
							that.toBooking();
						});
					}else {
						app.getUserInfo(function(lRes){
							that.mineInfo = lRes;
							that.toBooking();
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 682rpx;
		z-index: -1;
		background: linear-gradient( #FFD3DB,#fff);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			// width: 160rpx;
			// height: 58rpx;
			// background: rgba(255,255,255,0.1);
			// border-radius: 28rpx;
			// border: 1rpx solid #FA6400;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 33rpx;
				height: 33rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}
	
	// 门店信息
	.shop_title{
		// margin: 0 44rpx;
		// height: 400rpx;
		min-height: 550rpx;
		border-radius: 20rpx;
		.title{
			display: flex;
			align-items: center;
			padding: 18rpx 0;
			margin: 0 44rpx;
			.left{
				flex: 1;
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #333333;
				}
				.date{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					padding-top: 10rpx;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.img{
					width: 36rpx;
					height: 36rpx;
				}
				.bot{
					font-weight: bold;
					font-size: 20rpx;
					color: #310D09;
					padding-top: 2rpx;
				}
				button {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}
		.banner{
			display: -webkit-box;
			align-items: center;
			overflow-x: auto;
			margin: 0 0 0 44rpx;
			.item{
				width: 240rpx;
				height: 220rpx;
				margin-right: 12rpx;
				.img{
					width: 240rpx;
					height: 220rpx;
					border-radius: 12rpx;
				}
			}
		}
		.address{
			margin: 24rpx 44rpx 0;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #ECECEC;
			padding: 20rpx 0;
			
			.left{
				flex: 1;
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #303030;
				}
				.distance{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #88888E;
					padding-top: 2rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.img{
						width: 50rpx;
						height: 50rpx;
					}
					.text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #797A81;
						padding-top: 2rpx;
					}
				}
				.item:nth-child(1){
					margin-right: 38rpx;
				}
			}
		}
	}
	
	
	.voucher{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.shop_box{
			padding: 20rpx 18rpx 28rpx;
			.voucher_title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #10121E;
				}
				.right{
					display: flex;
					align-items: center;
					.allShop{
						font-weight: 400;
						font-size: 24rpx;
						color: #8C8D93;
					}
					.img{
						width: 18rpx;
						height: 26rpx;
						margin-left: 12rpx;
					}
				}
			}
			.voucher_con{
				margin: 12rpx 14rpx 0 16rpx;
				display: flex;
				align-items: center;
				.con_left{
					flex: 1;
						.name{
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #303030;
						}
						.date{
							font-size: 24rpx;
							color: #666666;
							padding: 8rpx 0 4rpx;
						}
						.priceAll{
							display: flex;
							align-items: center;
							.peiceNew{
								font-family: PingFangSC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #FD0303;
								.fontSize{
									font-size: 24rpx;
								}
							}
							.peiceOld{
								width: 60rpx;
								height: 30rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 1rpx solid #F33538;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 22rpx;
								color: #FD0303;
								margin-left: 22rpx;
							}
						}
				}
				.con_right{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.text{
						font-weight: 400;
						font-size: 22rpx;
						color: #9E9E9E;
						margin-bottom: 12rpx;
					}
					.btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 188rpx;
						height: 56rpx;
						background: linear-gradient( 115deg, #FFAB52 0%, #FF2125 100%);
						box-shadow: inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
						border-radius: 42rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	.groupShop{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		.group_title{
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			padding-bottom: 16rpx;
		}
		.group_con{
			width: 100%;
			.item{
				display: flex;
				align-items: center;
				background: #fff;
				padding: 24rpx 36rpx 24rpx 20rpx;
				margin-bottom: 24rpx;
				border-radius: 20rpx;
				.img{
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
				}
				.right{
					padding-left: 18rpx;
					flex: 1;
					.name{
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						word-break: break-all;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
					.desc{
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						padding: 8rpx 0 6rpxx;
						.text_xhx{
							margin: 0 10rpx;
						}
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price_left{
							.priceNew{
								font-weight: bold;
								font-size: 36rpx;
								color: #FD0303;
								.fontSize{
									font-size: 22rpx;
								}
							}
							.priceOld{
								font-size: 20rpx;
								color: #999999;
								text-decoration-line: line-through
							}
						}
						.price_right{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 188rpx;
							height: 56rpx;
							background: linear-gradient( 115deg, #FFAB52 0%, #FF2125 100%);
							box-shadow: inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
							border-radius: 42rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #FFFFFF;
						}
					}
				}
			}
			.item_kong{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				padding: 20rpx 0 30rpx;
			}
		}
	}


}
</style>
